<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn1">存储数据</button>
    <button class="btn2">获取数据</button>
    <button class="btn3">删除数据</button>
    <button class="btn4">删除所有数据</button>
    <script>
        /* 
           localstorage         
                    大小可以存储 5m左右
                    不会携带在http请求里；(cookie会被带再请求头里面，并且无法干预)
                
                */

        document.querySelector('.btn1').onclick = function () {
            localStorage.setItem("myitem", 'hzh happy forever')
            localStorage.setItem("myitem2", 'clh healty forever')
            let data = { name: 'hzh', gender: 'male' }
            // localStorage.setItem("myitem3",data)//[object,object]
            // localStorage.setItem("myitem3",data.toString())//[object,object]
            localStorage.setItem('myitem3', JSON.stringify(data))//转换成json格式再存储
        }
        document.querySelector('.btn2').onclick = function () {
            console.log(localStorage.getItem('myitem'));

            let localData = localStorage.getItem('myitem3')
            let item = JSON.parse(localData);
            console.log(localData, item) //{"name":"hzh","gender":"male"} {name: 'hzh', gender: 'male'}
        }
        document.querySelector('.btn3').onclick = function () {
            localStorage.removeItem("myitem")
        }
        document.querySelector('.btn4').onclick = function () {
            localStorage.clear()
        }
    </script>
</body>

</html>